{% load i18n %}
<!--xadmin自身引入了bootstrap和jquery，自己再引入会报错-->
<script src="/static/bootstrap_fileinput/js/fileinput.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap_fileinput/css/fileinput.css"></link>
<script src="/static/bootstrap_fileinput/js/locales/zh.js"></script>
<script src="/static/string-format.js"></script>
<link rel="stylesheet" href="/static/datatables/datatables.min.css"></link>
<script src="/static/datatables/datatables.min.js"></script>
<script src="/static/jquery-cookie/jquery.cookie.js"></script>

<!--
script标签引入js和link标签引入css
-->


<div class="btn-group dropdown">
    <button class="btn btn-default dropdown-toggle btn-sm" type="button"
            data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a data-toggle="modal" data-target="#upload-excel-modal">EXCEL</a></li>
        <li><a>Another action</a></li>
        <li><a>Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a>Separated link</a></li>
        <li>
        </li>
    </ul>
</div>

<!-- Modal -->
<div class="modal fade" id="upload-excel-modal" tabindex="-1" role="dialog" aria-labelledby="upload-excel-modal-label"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Upload EXCEL File</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="file-loading">
                    <input id="{{ input_id | lower }}" name="{{ input_name | lower }}" multiple type="file">
                </div>

                <div id="kartik-file-errors"></div>
                <div id="response"></div>

                <br>
                <br>
                <!-- Table -->
                <table class="display" id="table" width="100%"></table>

                <!--<table id="display-excel" class="display" style="width:100%">-->
                <!-- Table End-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" title="Your custom upload logic">Save</button>
            </div>
        </div>
    </div>
</div>
<script>
    const target_app = '{{ target_app }}';
    const target_model = '{{ target_model }}';
    const input_id = '{{ input_id | lower}}';
    const input_name = '{{ input_name | lower }}';
    console.log(target_app, target_model, input_id, input_name);


    $(document).on('ready', function () {

    });

    const $fileInput = $("#{0}".format(input_id));
    $fileInput.fileinput({
        type: 'POST',
        uploadUrl: '/upload/app/{0}/model/{1}'.format(target_app, target_model),
        uploadAsync: true,              //异步上传
        language: "zh",                 //设置语言
        showCaption: true,              //是否显示标题
        showUpload: true,               //是否显示上传按钮
        showRemove: true,               //是否显示移除按钮
        showPreview: true,             //是否显示预览按钮
        //browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: false,         //是否显示拖拽区域
        allowedFileExtensions: ["xls", "xlsx"], //接收的文件后缀
        maxFileCount: 1,                        //最大上传文件数限制
        previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
        allowedPreviewTypes: null,
        previewFileIconSettings: {
            'xlsx': '<i class="glyphicon glyphicon-file"></i>',
            'xls': '<i class="glyphicon glyphicon-file"></i>',
            //'docx': '<i class="glyphicon glyphicon-file"></i>',
            //'pptx': '<i class="glyphicon glyphicon-file"></i>',
            //'jpg': '<i class="glyphicon glyphicon-picture"></i>',
            //'pdf': '<i class="glyphicon glyphicon-file"></i>',
            //'zip': '<i class="glyphicon glyphicon-file"></i>',
        },
        elErrorContainer: '#kartik-file-errors',
        uploadExtraData: function (previewId, index) {
            let data = {
                'input_name': input_name,
                'csrfmiddlewaretoken': $.cookie('csrftoken'),
            };
            // django view 重载post方法 request.POST.get('input_name')
            // django view 重载post方法 request.POST.get('csrfmiddlewaretoken')

            return data;
        }
    });

    $fileInput.on("fileuploaded", function (event, data, previewId, index) {
        let table_head = data.response['table-head'];
        let table_body = data.response['table-body'];
        for (let i = 0; i < table_head.length; i++) {
            table_head[i] = {'title': table_head[i]}
        }


        console.log(table_head);
        console.log(table_body);
        const $table = $("#table");
        $table.show();
        $table.DataTable({
            scrollX: true,
            data: table_body,
            columns: table_head,
        })


    });

    $fileInput.on('fileclear', function (event) {
        const $table = $("#table");
        $table.DataTable().destroy();
        $table.hide();
    });


    /*
    const initFileInput = function (target_app, target_model, input_id, input_name) {
        $(document).on('ready', function () {
            $("#{0}".format(input_id)).fileinput({
                type: 'POST',
                uploadUrl: '/upload/app/{0}/model/{1}'.format(target_app, target_model),
                uploadAsync: true,              //异步上传
                language: "zh",                 //设置语言
                showCaption: true,              //是否显示标题
                showUpload: true,               //是否显示上传按钮
                showRemove: true,               //是否显示移除按钮
                showPreview: true,             //是否显示预览按钮
                //browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: false,         //是否显示拖拽区域
                allowedFileExtensions: ["xls", "xlsx"], //接收的文件后缀
                maxFileCount: 1,                        //最大上传文件数限制
                previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
                allowedPreviewTypes: null,
                previewFileIconSettings: {
                    'xlsx': '<i class="glyphicon glyphicon-file"></i>',
                    'xls': '<i class="glyphicon glyphicon-file"></i>',
                    //'docx': '<i class="glyphicon glyphicon-file"></i>',
                    //'pptx': '<i class="glyphicon glyphicon-file"></i>',
                    //'jpg': '<i class="glyphicon glyphicon-picture"></i>',
                    //'pdf': '<i class="glyphicon glyphicon-file"></i>',
                    //'zip': '<i class="glyphicon glyphicon-file"></i>',
                },
                elErrorContainer: '#kartik-file-errors',
                uploadExtraData: function (previewId, index) {
                    let data = {
                        'input_name': input_name
                    };
                    // request.POST.get('excel') === input_name
                    return data;
                }
            }).on("fileuploaded",
                function (event, data, previewId, index) {
                    let table_body = data.response['table-body'];
                    let columns = [];
                    for (let k in table_body[0]) {
                        columns.push(
                            {
                                'title': k,
                                'field': k,
                            }
                        )
                    }
                    console.log(columns);
                }
            );
        });
    };
    initFileInput(target_app, target_model, input_id, input_name);
    */


</script>
